<template>
    <div class="install-database-dialog">
        <div class="alert alert-info d-flex align-items-center" role="alert">
            <bi-icon data="fa-exclamation-triangle"></bi-icon>
            <div style="padding-left: 10px;">
                {{dbNotice}}
            </div>
        </div>
        <bi-table :data="dbConfigList" height="300">
            <bi-table-column label="名称" name="name"  width="150"></bi-table-column>
            <bi-table-column  label="安装到" name="driver" v-slot="{row}"  >
                <div class="display:flex;flex-direction:column;">
                    <div v-if="row.config">{{row.driver}}</div>
                    <div v-else class="text-danger" ><bi-icon data="fa-info-circle"></bi-icon> 没有找到数据库配置信息</div>
                    <div >{{row.driver_info}}</div>
                    <div v-if="row.config && !row.file" class="text-danger" ><bi-icon data="fa-info-circle"></bi-icon>找到数据库文件</div>
                </div>
            </bi-table-column>
            <bi-table-column  label="操作" v-slot="{row}" width="150">
                <bi-button type="primary" v-if="row.file" @click="installDb(row)" :loading = "formLoading[row.name]" >
                    {{formLoading[row.name]?'正在安装':'安装'}}
                </bi-button>
            </bi-table-column>
        </bi-table>
    </div>
</template>

<script>
export default{
    dialog:{
        title:'安装数据库',
        loading:true,
        width:600,
        okButton:false
    },
    data(){
        let formLoading = {};
        return {
            formLoading,
            dbConfigList:[],
            dbNotice:''
        }
    },
    props:{
        app:String
    },
    methods:{
        installDb(item){
            this.formLoading[item.name] = true;
            this.$ajax({
                url:this.$url({action:'installDb'}),
                data:{
                    app:this.app,
                    name:item.name
                },
                success:(res)=>{
                    this.$toast('安装成功');
                },
                over:()=>{
                    this.formLoading[item.name] = false;
                }
            });
        }
    },
    mounted(){
        this.$ajax({
            url:this.$url({action:'installConfig'}),
            data:{
                app:this.app
            },
            success:(res)=>{

                if (res.dbType == 'app'){
                    this.dbNotice = '当前使用的是应用数据库配置';
                }

                if (res.dbType =='system'){
                    this.dbNotice = '当前使用的是系统数据库配置';
                }

                this.dbConfigList =  res.configList;

                for(let i in res.configList){
                    this.formLoading[i] = false;
                }
            
                
                this.dialog.loading = false;
            },
        });
    }
}
</script>

<style>
.install-dialog{
    height: 300px;
}
</style>